<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	String picPath = request.getParameter("domian")+"goods/detailPage?goodsId=";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=basePath%>">
<!-- 下拉框 -->
<link rel="stylesheet" href="static/ace/css/chosen.css" />
<!-- jsp文件头和头部 -->
<%@ include file="../index/top.jsp"%>
<!-- 日期框 -->
<link rel="stylesheet" href="static/ace/css/datepicker.css" />
<link href="plugins/kindeditor/themes/default/default.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/jquery-tagsinput/1.3.6/jquery.tagsinput.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link href="static/styles/base.css" rel="stylesheet">
</head>
<body class="no-skin">
	<!-- /section:basics/navbar.layout -->
	<div class="main-container" id="main-container">
		<div class="main-content">
			<div class="main-content-inner">
				<div class="page-content">
					<div class="row">
						<div class="col-xs-12">
						<form action="goods/${msg}.do" method="post" name="recommendedForm" id="recommendedForm">
						<div id="zhongxin" style="padding-top: 13px;">
						<input id = "id" name = "id" value="${obj.id}" type="hidden">
					    <input id = "attr" name ="attr" value="" type="hidden">
                        <input id = "param" name ="param" value="" type="hidden">
						<table id="simple-table" class="table table-striped table-bordered table-hover" style="margin-top:5px;">
                          <thead>
                            <tr>
                               <th width="60"></th>
                               <th width="220" class="tc">规格名称</th>
                               <th>规格值      &nbsp;&nbsp;&nbsp;(可使用键盘“回车键”快速添加规格值)</th>
                            </tr>
                          </thead>
                          <tbody class="vm goods-box">
                            <tr>
                                <td><div class="tc"><a class="dib vm ion-android-remove btn-less-spec f20 g3 ml10" href="javascript:;"></a></div></td>
                                <td class="tc"><input type="text" name="spec" value="规格1"></td>
                                <td class="tc"><div class="rel"><input class="tags" type="text" name="spec" placeholder="输入规格"></div></td>
                            </tr>
                          </tbody>
						</table>
                        <table id="simple-table1" class="table table-striped table-bordered table-hover" style="margin-top:5px;">
                            <tbody class="vm goods-box1">
                            <tr>
                                <td>
                                   <div><a class="dib vm ion-android-add btn-add-spec f16 g3" href="javascript:;">添加规格</a></div>
                                </td>                            
                            </tr>
                          </tbody>
                        </table>
                        
                       <div class="tr">
                        <a class="dib pd10 f16 white mr20 btn-generate btn btn-primary" href="javascript:;">生成规格</a>
                       </div>
                        
                         <table id="data" class="table table-bordered tc js-goods-standard dn mt20 pt20" data-drag="false">
                            <thead></thead>
                            <tbody class="goods-standard-list"></tbody>
                          </table>
						</div>
						<div id="zhongxin2" class="center" style="display:none"><br/><br/><br/><br/><img src="static/images/jiazai.gif" /><br/><h4 class="lighter block green"></h4></div>
						</form>
 						</div>
						<!-- /.col -->
					</div>
					<!-- /.row -->
				</div>
				<!-- /.page-content -->
			</div>
		</div>
		<!-- /.main-content -->
	</div>
	<!-- /.main-container -->
	<!-- basic scripts -->
	<!-- 页面底部js¨ -->
	<%@ include file="../index/foot.jsp"%>
	<!-- ace scripts -->
	<script src="static/ace/js/ace/ace.js"></script>
	<!-- inline scripts related to this page -->
	<!-- 下拉框 -->
	<script src="static/ace/js/chosen.jquery.js"></script>
	<!--提示框-->
	<script type="text/javascript" src="static/js/jquery.tips.js"></script>
	
	<script type="text/javascript" src="static/js/common/file_upload.js"></script>
	<script type="text/javascript" src="plugins/kindeditor/kindeditor-all.js"></script>
	<script type="text/javascript" src="plugins/kindeditor/lang/zh_CN.js"></script>
    <script src="https://cdn.bootcss.com/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js"></script>
	</body>
 	<script type="text/javascript">
 	    $(top.hangge());
 	    
 	   $(function(){
 		  newSpec()
 		  tags()
		}); 
 	   
 	  function newSpec(){
 			var tbody1 = $('.goods-box1')
 			var tbody = $('.goods-box')
 			// 添加
 			tbody1.on('click','.btn-add-spec',function(){
 				var $tr = tbody.find('tr')
 				if($tr.length>=2){
 					$("#simple-table1").hide();
 				}
 				var num = +$tr.length+1
 				var html = template(num)
 				$tr.eq(0).find('.btn-less-spec').show()
 				tbody.append(html)
 				
 				tags()
 			})
 			// 删除
 			tbody.on('click','.btn-less-spec',function(){
 				var $tr = tbody.find('tr')
 				var index = $(this).parents('tr').index()
 				
 				if($tr.length==3){
 					$("#simple-table1").show();
 				}
 				if($tr.length==1) return false;
 				var goodsId = $(this).parents('tr').find("input[name=goodsId]").val();
 				if(goodsId != null){
 					delete goodsList[goodsId];
 				}
 				$(this).parents('tr').remove();
 				$('tester').eq(index).remove()
 				
 			})

 		}
 	  
 	  
 	  // 获取规格数据
 	  function getInputVal(){
 		  var $table = $('.js-goods-standard');
 		  var ths = $table.find('thead th')
 		  var trs = $table.find('tbody tr')
 		  var html=''
 		  var data=[{
 			 key:[],
 			 value:[]
 		  }]
 		  for(var i=1;i<ths.length;i++){
 			  var val = ths.eq(i).text()
 			  data[0].key.push(val)
 		  } 		  
    	  for(var i=0;i<trs.length;i++){
    		  var tds = trs.eq(i).find('td')
    		  var text ='';
    		  data[0].value.push([])
    		  for(var j=1;j<tds.length;j++){
    			  var val =tds.eq(j).find('input[name=stock]').val()
    			  var index = tds.eq(j).attr('data-index')
    			  if(index){
    				  if(j === tds.length-2){
    					  text +=index
    				  }else{
    					  text +=index+'-'
    				  }
    			  }
    			  if(!!val){
    				  data[0].value[i].push($.trim(val));
    			  }
    			 
    		  }
    		  data[0].value[i].push(text);
    	  }
    	  var data=JSON.stringify(data);
    	 $("#param").val(data);
 	  }
 	  // tag 数据
 	  function getTagVal(){
 		  var num=0;
 		  var data = []
 		  var $tbody = $('.goods-box');
 		  var $trs = $tbody.find('tr');
 		  for(var i=0;i<$trs.length;i++){
 			  var key = $trs.eq(i).find('input[name=spec]').val();
 			  var $tags = $trs.eq(i).find('.tag');
 			  data.push({key:key,value:[]}); 
 			  if(i==0){
 				 num=$tags.length  
 			  }else{
 				 num=num*$tags.length;
 			  }
 			  for(var j=0;j<$tags.length;j++){
 				  var val = $.trim($tags.eq(j).find('span').text());
 				 data[i].value.push(val) 				  
 			  }
 			  
 		  }
 		 if(num>=200){
 			return num;
 		 }
 		 var param=JSON.stringify(data);
 		 $("#attr").val(param);
 	  }
 	  
 	  $('.btn-generate').on('click',function(){
 		 var num=getTagVal();
 		 if(num>=200){
 			alert("商品规格不能超过200个!")
 			return false;
 		 }
 		 generate()
 		 var $tr = $('.goods-box tr');
	     var len = $tr.length;
	     var ths ='<tr><th width="50" class="tc"></th>'
	     for(var i=0;i<len;i++){
	    	 var val = $tr.eq(i).find('input[name=spec]').val()
	    	 ths+='<th width="200" class="tc norm-item-key">'+val+'<input type="hidden" value="'+val+'"></th>'
	     }
	     ths +='<th>库存<input type="hidden" name="" value="库存"></th></tr>'
	    $('.js-goods-standard').find('thead').html(ths)
	    //getInputVal();
 	  })
 	  
 	  function generate(){
 	      var $tagsinput = $('.tagsinput');
 	      var len = $tagsinput.length;
 	      var html = '',text = '',initIndex = 0;
 	      var tagVal = [];
 	      
 	      (function recursively(n, vhtml) {
 	        if (n >= len) return false;
 	        var ele = $tagsinput.eq(n);
 	        var tags = ele.find('.tag');
 	        if (!tags.length) {
 	          recursively(n + 1, '');
 	        }
 	        for (var j = 0; j < tags.length; j++) {
 	          var tag = tags.eq(j);
 	          var val = tag.find('span').text()
 	           text = vhtml + '<td class="norm-item-value" data-index="p'+(j+1)+'">' + val +  '</td>';
 	          if(n === len-1){
 	        	 initIndex+=1;
 	        	 html += '<tr class="goods-standard-item">';
	 	         html +='<td><div class="serial-number">'+initIndex+'</div></td>';
	 	         html += text;
	 	         html +='<td><input class="form-control" type="number" value="1" min="0" name="stock" id="stock"></td></tr>';
	 	         
	 	        
 	         }
 	          recursively(n + 1, text);
 	        }
 	      })(0, '');
 	      $('.js-goods-standard').show().find('tbody').html(html)
 		
 	  }
 	  
 	  
 	 function tags(){
 		$('.tags').tagsInput({
         width: 'auto',
         height: 'auto',
         defaultText: '',
         onAddTag: function(txt) {},
         onRemoveTag: function(txt) {}
       });
 	 }
 	    
 	  function template(num){
 			var html ='<tr><td><div class="tc">'+
            '<a class="dib vm ion-android-remove btn-less-spec f20 g3 ml10" href="javascript:;"></a></div>'+
            '</td><td class="tc"><input type="text" name="spec" value="规格'+num+'"></td>'+
            '<td class="tc"><div class="rel"><input class="tags" type="text" name="spec" placeholder="输入规格"></div></td></tr>';
 			return html;
 		}
 	
		</script>
</html>